<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 疫苗预约系统</title>
    <link rel="stylesheet" href="../css/common.css?v=20251119">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="main-container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="sidebar-header">
                <i class="fas fa-syringe"></i>
                <h2>疫苗预约系统</h2>
                <p>普通用户</p>
            </div>
            <nav class="sidebar-menu">
                <a href="home.html" class="menu-item">
                    <i class="fas fa-home"></i>
                    <span>首页</span>
                </a>
                <a href="family.html" class="menu-item">
                    <i class="fas fa-users"></i>
                    <span>家属管理</span>
                </a>
                <a href="appointment.html" class="menu-item">
                    <i class="fas fa-calendar-check"></i>
                    <span>预约管理</span>
                </a>
                <a href="vaccine.html" class="menu-item">
                    <i class="fas fa-vial"></i>
                    <span>疫苗查询</span>
                </a>
                <a href="site.html" class="menu-item">
                    <i class="fas fa-hospital"></i>
                    <span>接种点查询</span>
                </a>
                <a href="profile.html" class="menu-item active">
                    <i class="fas fa-user-circle"></i>
                    <span>个人中心</span>
                </a>
            </nav>
        </div>

        <!-- 主内容区域 -->
        <div class="main-content">
            <!-- 顶部导航栏 -->
            <div class="top-navbar">
                <div class="navbar-left">
                    <h1>个人中心</h1>
                </div>
                <div class="navbar-right">
                    <div class="user-info">
                        <div class="user-avatar" id="userAvatar">U</div>
                        <span class="user-name" id="userName">用户</span>
                    </div>
                    <button class="btn-logout" onclick="handleLogout()">
                        <i class="fas fa-sign-out-alt"></i> 退出登录
                    </button>
                </div>
            </div>

            <!-- 内容区域 -->
            <div class="content-area">
                <!-- 页面标题 -->
                <div class="page-header">
                    <h2 class="page-title">个人中心</h2>
                    <p class="page-subtitle">管理您的个人信息和账户设置</p>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                    <!-- 个人信息卡片 -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">个人信息</h3>
                        </div>
                        <div class="card-body">
                            <div class="profile-info">
                                <div class="profile-avatar">
                                    <div class="avatar-large" id="profileAvatar">U</div>
                                </div>
                                <div class="profile-details">
                                    <div class="profile-item">
                                        <label>账号</label>
                                        <div id="profileAccount">-</div>
                                    </div>
                                    <div class="profile-item">
                                        <label>用户ID</label>
                                        <div id="profileUserId">-</div>
                                    </div>
                                    <div class="profile-item">
                                        <label>角色</label>
                                        <div>
                                            <span class="badge badge-info" id="profileRole">普通用户</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 修改密码卡片 -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">修改密码</h3>
                        </div>
                        <div class="card-body">
                            <form id="changePasswordForm">
                                <div class="form-group">
                                    <label>原密码 <span style="color: red;">*</span></label>
                                    <input type="password" id="oldPassword" placeholder="请输入原密码" required>
                                </div>
                                <div class="form-group">
                                    <label>新密码 <span style="color: red;">*</span></label>
                                    <input type="password" id="newPassword" placeholder="请输入新密码" required>
                                    <small style="color: #999; font-size: 12px;">密码长度至少6位</small>
                                </div>
                                <div class="form-group">
                                    <label>确认新密码 <span style="color: red;">*</span></label>
                                    <input type="password" id="confirmPassword" placeholder="请再次输入新密码" required>
                                </div>
                                <div class="form-group">
                                    <button type="button" class="btn btn-primary" onclick="handleChangePassword()">
                                        <i class="fas fa-key"></i> 修改密码
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- 账户统计 -->
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">账户统计</h3>
                    </div>
                    <div class="card-body">
                        <div class="stats-grid">
                            <div class="stat-card">
                                <div class="stat-icon primary">
                                    <i class="fas fa-calendar-check"></i>
                                </div>
                                <div class="stat-info">
                                    <h3 id="totalAppointments">0</h3>
                                    <p>总预约数</p>
                                </div>
                            </div>

                            <div class="stat-card">
                                <div class="stat-icon success">
                                    <i class="fas fa-check-circle"></i>
                                </div>
                                <div class="stat-info">
                                    <h3 id="completedAppointments">0</h3>
                                    <p>已完成</p>
                                </div>
                            </div>

                            <div class="stat-card">
                                <div class="stat-icon warning">
                                    <i class="fas fa-clock"></i>
                                </div>
                                <div class="stat-info">
                                    <h3 id="pendingAppointments">0</h3>
                                    <p>待接种</p>
                                </div>
                            </div>

                            <div class="stat-card">
                                <div class="stat-icon danger">
                                    <i class="fas fa-users"></i>
                                </div>
                                <div class="stat-info">
                                    <h3 id="totalFamily">0</h3>
                                    <p>家属成员</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .profile-info {
            padding: 20px 0;
        }

        .profile-avatar {
            text-align: center;
            margin-bottom: 30px;
        }

        .avatar-large {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            font-weight: bold;
        }

        .profile-details {
            margin-top: 20px;
        }

        .profile-item {
            padding: 15px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .profile-item:last-child {
            border-bottom: none;
        }

        .profile-item label {
            display: block;
            color: #666;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .profile-item div {
            color: #333;
            font-size: 16px;
            font-weight: 500;
        }
    </style>

    <script src="../js/common.js"></script>
    <script src="js/profile.js"></script>
</body>
</html>

